<template>
  <div class="menu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button  @click="openEdit"
          >添加广告</el-button
        >
      </div>
      <el-table
      :data="adverts"
      style="width: 100%">
      <el-table-column
        label="id"
        prop="id"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="广告名称"
        align="center">
      </el-table-column>

      <el-table-column
        prop="spaceName"
        label="广告位置"
        align="center">
      </el-table-column>

      <el-table-column
        label="广告图片"
        align="center">
        <template  slot-scope="scope">
            <el-image
            style="height:80px"
                :src="scope.row.img"
                fit="contain"></el-image>
        </template>
      </el-table-column>

      <el-table-column
        label="时间"
        align="center"
        width="250px">
        <template slot-scope="scope">
          <p>开始时间：{{scope.row.startTimeFormatString}}</p>
          <p>结束时间：{{scope.row.endTimeFormatString}}</p>
        </template>
      </el-table-column>

      <el-table-column
        label="上线/下线"
        align="center">
        <template  slot-scope="scope">
            <el-switch
            @change="val=>{stateChange(val,scope.row)}"
            v-model="scope.row.status"
            :active-value=1
            :inactive-value=0>
            </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
             <el-link @click="handleEdit(scope.row)">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>

    </el-card>

    <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="50%">
        <el-form ref="form" :model="form" label-width="80px">

  <el-form-item label="广告名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

  <el-form-item label="广告位置">
    <el-select v-model="form.spaceId" placeholder="请选择广告位置">
      <el-option :label="item.name" :value="item.id" v-for="(item,index) in spaces" :key="index"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="开始时间">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" ></el-date-picker>
  </el-form-item>
   <el-form-item label="到期时间">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" ></el-date-picker>
  </el-form-item>
  <el-form-item label="上线/下线">
        <el-radio v-model="form.status" label="1">上线</el-radio>
        <el-radio v-model="form.status" label="0">下线</el-radio>
  </el-form-item>
  <el-form-item label="广告图片">
    <el-upload
      action="/boss/course/upload"
      list-type="picture-card"
      :auto-upload="false"
      :file-list="form.uploadList"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-remove="onRemove"
      :limit="1"
      :on-exceed="onExceed"
      ref="formUpload">
      <i class="el-icon-plus"></i>
    </el-upload>
    <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-form-item>

  <el-form-item label="广告链接">
    <el-input v-model="form.link"></el-input>
  </el-form-item>

  <el-form-item label="广告备注">
    <el-input type="textarea" v-model="form.text"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">添加</el-button>
    <el-button @click="()=>this.dialogVisible=false">取消</el-button>
  </el-form-item>
</el-form>

</el-dialog>

  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getAdList, updateStatus, getAdById, saveOrUpdate } from '@/service/advert'
import { getAllSpaces } from '@/service/advert-space'
import { Upload } from 'element-ui'
interface form {
        name: string;
        id: string;
        uploadList:any;
        img: string | undefined
}
export default Vue.extend({

  name: 'MenuCreate',
  data () {
    const form:form = { name: '', id: '', uploadList: [], img: '' }
    return {
      form,
      adverts: [{ spaceName: null, spaceId: null }],
      dialogVisible: false,
      spaces: []
    }
  },
  created () {
    this.loadGetAllSpace()
    this.loadAllMenu()
  },
  methods: {
    async loadAllMenu () {
      const { data } = await getAdList()
      if (data.state === 1) {
        this.adverts = data.content
        for (const i in this.adverts) {
          this.adverts[i].spaceName = this.getNameById(this.adverts[i].spaceId, this.spaces)
        }
      }
    },
    getNameById (val:any, list:Array<any>):any {
      for (const i in list) {
        if (list[i].id === val) {
          return list[i].name as never
        }
      }
      return undefined as never
    },
    async loadGetAllSpace () {
      const { data } = await getAllSpaces()
      if (data.state === 1) {
        this.spaces = data.content
      }
    },
    async stateChange (val:any, row:any) {
      const { data } = await updateStatus({ id: row.id, status: val })
      if (data.state === 1) {
        const { data: result } = await getAdById(row.id)
        if (result.state === 1) {
          row = result.content
        }
      }
    },
    openEdit () {
      this.form = { name: '', id: '', uploadList: '', img: '' }
      this.dialogVisible = true
    },
    onRemove () {
      console.log('删除方法执行了')
      this.form.img = undefined
    },
    handleEdit (row:any) {
      this.form = { ...row }
      this.form.uploadList = [{ url: row.img, status: 'success' }]
      this.dialogVisible = true
    },
    onSubmit () {
      if (this.form.img) {
        this.saveAd()
      } else {
        (this.$refs.formUpload as Upload).submit()
      }
    },
    uploadSuccess (res:any) {
      this.form.img = res.data.name
      this.saveAd()
    },
    async saveAd () {
      const { data } = await saveOrUpdate(this.form)
      if (data.state === 1) {
        this.$message.success(data.message)

        this.dialogVisible = false
        this.loadAllMenu()
      } else {
        this.$message.error(data.message)
      }
    },
    uploadError () {
      this.$message.error('上传失败请检查网络')
    },
    onExceed () {
      this.$message.error('只能上传一个文件')
    }
  }
})
</script>
<style scoped lang="scss">
</style>
